<template>
  <div>
    <div class="row">
      <img :src="iconWarning" alt="" />
      <div class="title">您确认要删除计费规则[{{ ruleName }}]？</div>
    </div>
    <div v-if="!flag" class="tip">该规则已绑定路段，不能删除</div>
    <div class="footer">
      <div></div>
      <div>
        <el-button class="reset-btn" @click="resetForm()">取消</el-button>
        <el-button class="confirm-btn" @click="submitForm()">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { getDeleteBillingRules } from "../request.js";

import iconWarning from "../../../../../assets/image/warning.png";

const props = defineProps({
  operationId: String,
});
console.log("props.operationId.ruleName ===>", props.operationId.ruleName);

const ruleName = ref(props.operationId.ruleName);
const flag = ref(false);

// 确定
const submitForm = async () => {
  await getDeleteBillingRules(props.operationId.id).then((res) => {
    console.log("res ===>", res);
    if (res.data.code === 0) {
      ElMessage({
        type: "success",
        message: res.data.result,
      });
      emits("operationDone");
    } else {
      flag.value = true;
      ElMessage.error(res.data.msg);
      return;
    }
  });

  // 关闭弹窗
};

// 取消
const resetForm = () => {
  emits("operationDone");
};
const emits = defineEmits(["operationDone"]);
</script>

<style lang="less" scoped>
.row {
  display: flex;
  align-items: center;
}
.title {
  font-weight: 400;
  font-size: 14px;
  color: #666666;
  margin-left: 12px;
}
.tip {
  margin-top: 9px;
  font-weight: 400;
  font-size: 12px;
  color: #007aff;
}
.footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
}
.reset-btn {
  padding: 8px 15px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #dcdcdc;
  font-weight: 400;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
}
.confirm-btn {
  padding: 8px 15px;
  background: #2683f1;
  border-radius: 4px;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
}
</style>